<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>时钟</title>
		<style type="text/css">
			#can{
				width: 600px;
				height: 600px;
				margin: 10px auto;
				border:1px solid #ccc;
				display: block;
			}
		</style>
	</head>
	<body>
		<canvas id="can" width="1200" height="1200"></canvas>
		<script type="text/javascript">
			let dom = document.getElementById("can")
			let can = dom.getContext("2d")
			
			can.translate(dom.width/2,dom.height/2)
			
			can.save()
			
			let r = dom.width*0.4
			
			let d = new Date()
			
			draw(d)
			
			setInterval(()=>{
				let i = new Date()
				can.restore()
				can.save()
				can.clearRect(-dom.width/2,-dom.height/2,dom.width,dom.height)
				draw(i)
//				console.log(i.getSeconds())
			},1000)
			
			function draw(date){
				panel()
				let countMin = date.getHours()*60 + date.getMinutes()
				drawH(countMin)//画时针
				drawM(date.getMinutes()) //画分针
				drawS(date.getSeconds()) //画秒针
				point()
			}
			
			function panel(){
				//画表盘
				can.arc(0,0,r,0,2*Math.PI)
				can.fill()
				can.beginPath()
				
				//画时刻度
				for(let i=0;i < 12;i++){
					can.rotate(2*Math.PI/12)
					can.strokeStyle = "#fff"
					can.lineWidth = 14
				
					can.moveTo(0,-r+35)
					can.lineTo(0,-r+110)
					can.stroke()
				}
			
			
				//画分刻度
				for(let j = 0;j < 60; j ++){
					can.strokeStyle = "#fff"
					can.lineWidth = 4
					can.rotate(2*Math.PI/60)
					can.moveTo(0,-r+35)
					can.lineTo(0,-r+75)
					can.stroke()
				}
			}
			
			
			function drawH(min){
				//画时针
				can.beginPath()
				can.restore()
				can.save()
				can.strokeStyle = "#fff"
				can.rotate(2*Math.PI/720*min)
				can.lineWidth = 16
				can.moveTo(0,60)
				can.lineTo(0,-r+280)
				can.stroke()
				
			}
			
			function drawM(min){
				//画分针
				can.beginPath()
				can.restore()
				can.save()
				can.strokeStyle = "#fff"
				can.rotate(2*Math.PI/60*min)
				can.lineWidth = 8
				can.moveTo(0,100)
				can.lineTo(0,-r+200)
				can.stroke()
			}
			
			
			function drawS(s){
				//画秒针
				can.beginPath()
				can.restore()
				can.save()
				can.rotate(2*Math.PI/60*s)
				can.strokeStyle = "#f00"
				can.lineWidth = 4
				can.moveTo(0,100)
				can.lineTo(0,-r+140)
				can.stroke()
			}
			
			
			function point(){
				can.beginPath()
				can.fillStyle = "#f00"
				can.arc(0,0,8,0,2*Math.PI)
				can.fill()				
			}
		</script>
	</body>
</html>
